<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<html>
<head>
    <base href="<%=basePath%>">
    <title>角色创建</title>

    <link rel="stylesheet" type="text/css" href="css/edittable.css"  ></link>
    <link rel="stylesheet" type="text/css" href="css/validate.css"  ></link>
    <script type="text/javascript"  src="js/jquery-1.8.0.js"></script>

	
    <script>
        $(function () {
            $("input[type=text],textarea").focus(function () {
                $(this).addClass("input_focus");
            }).blur(function () {
                $(this).removeClass("input_focus");
            });

            $(".form_btn").hover(function () {
                    $(this).css("color", "red").css("background", "#6FB2DB");
                },

                function () {
                    $(this).css("color", "#295568").css("background", "#BAD9E3");
                });
            
            //验证角色名
    		function validateRoleName() {
                var roleName = $("#roleName").val();
                if(roleName==""){
                	$("#roleName_msg").removeClass().addClass("validate_error").html("用户名不能为空");
                	return false;
                }
                
                else{
	                 $.ajax({
	                     url: "RoleServlet.do",
	                     type: "POST",
	                     data: {roleName: $("#roleName").val(),flag:"validate"},
	                     async:false,
	                     success: function (data) {
	                        if(data==-1){
	                            $("#roleName_msg").removeClass().addClass("validate_error").html("用户名已存在");
	                            return false;
	                        }else {
	                            $("#roleName_msg").removeClass().addClass("validate_ok").html("✓");
	                            return true;
	                        }
	                     }
	                 });
                }
            }

          //验证
            $("#roleName").blur(function () {
             	validateRoleName();
            });
            $(".form_btn").click(function () {
                var result=true;
                if (validateRoleName()==false) {
                   result=false;
                }
                if(result==true){
                    return confirm("请确认提交");
                }
                return result;
            });
		});
	</script>

</head>
<body>
<div class="div_title">
<div class="div_titlename"><img src="images/san_jiao.gif"><span>创建角色</span></div>
</div>

<form action="RoleServlet.do" method="post">
<input type="hidden" name="flag" value="add">
<table class="edit_table">
    <tr>
        <td class="td_info">角色账号:</td>
        <td class="td_input_short">
            <input type="text" class="txtbox" id="roleName" name="roleName" value="${param.roleName}"/>
        </td>
        <td>
            <label class="validate_info" id="roleName_msg">用户名不能为空</label>
        </td>
    </tr>
    <tr>
        <td class="td_info">角色描述:</td>
        <td><textarea rows="4" cols="27" name="des" class="txtarea">${param.des}</textarea></td>
        <td><label></label></td>
    </tr>
    <tr>
        <td class="td_info"></td>
        <td>
            <input class="form_btn" type="submit" value="提交"/>
            <input type="reset" class="form_btn" value="重置"/></td>
        <td>
            <label id="result_msg" class="result_msg">${msg}</label>
        </td>
    </tr>
</table>
</form>
</body>
</html>
